<template>
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        {{ title }}
      </a>
    </div>

    <div class="navbar-menu">
      <div class="navbar-start">
        <router-link to="/" class="navbar-item">Home</router-link>
        <router-link to="/about" class="navbar-item">About</router-link>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Navbar',
  data() {
    return {
      title: 'My App'
    }
  }
}
</script>

<style>
.navbar {
  background-color: #e6e6e6;
  padding: 0.5rem 1rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-menu {
  display: flex;
  justify-content: flex-end;
}

.navbar-item {
  color: #333;
  text-decoration: none;
  padding: 0.5rem;
}

.navbar-item:hover {
  background-color: #ccc;
}
</style>
